<template>
	<view>
		<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
			<view class="top_box">
				<view class="top_box_left">
					<image class="top_box_left_img" src="/static/6.png" mode=""></image>
					吉林
				</view>
				<view class="top_box_title">
					<image class="top_box_title_img" src="/static/7.png" mode=""></image>
					<input
						class="top_box_title_inp"
						type="text"
						placeholder="搜索旅行社名称"
						confirm-type="search"
						v-model="title"
						@confirm="indexlist" />
				</view>
				<view class="top_box_right" :style="`width: ${$Width() + 15}px;`"></view>
			</view>
			<view class="sift"></view>
		</view>
		<view class="con">
			<view class="con_img"></view>
			<view class="box">
				<view class="list">
					<view class="list_nr" v-for="(item, index) in list" :key="index" @click="to_trip_detail(item.id)">
						<image class="list_nr_img" :src="item.photo" mode=""></image>

						<view class="list_nr_box">
							<view class="list_nr_title">{{ item.title }}</view>
							<view class="list_nr_text">
								<view class="list_nr_text_nr">{{ item.area }}</view>
								<view class="list_nr_text_nr">{{ item.juli }}km</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<TabBar :type="1" :index="4"></TabBar>
	</view>
</template>

<script setup>
	import { useCityStore } from '@/utils/cityStore.js'
	const cityStore = useCityStore()
	const http = inject('$http')
	let list = ref([])
	let title = ref('')
	let nav_id = ref(1)
	const navclick = (id) => {
		nav_id.value = id
	}
	const indexlist = async () => {
		await http
			.noAuthpost('/srapi/yuangong/lxlist', {
				title: title.value,
				city: '吉林市',
				lat: cityStore.localtion.latitude,
				lng: cityStore.localtion.longitude
			})
			.then((res) => {
				console.log('返回值', res)
				list.value = res.data
			})
	}

	onShow(() => {
		console.log('页面刷新')
	})
	onLoad(async (option) => {
		console.log('接收传参:', option)
		uni.showLoading({})
		await cityStore.init()
		await indexlist()
		uni.hideLoading()
	})

	const to_trip_detail = (id) => {
		uni.navigateTo({
			url: '/pages_A/trip_detail/trip_detail?id=' + id
		})
	}
</script>

<style lang="less" scoped>
	.top {
		width: 750rpx;
		position: sticky;
		left: 0;
		top: 0;
		z-index: 9;
		width: 750rpx;
		background: linear-gradient(135deg, #83d3f4 0%, #c4f1d2 100%);
		.top_box {
			box-sizing: border-box;
			width: 750rpx;
			position: relative;
			padding-left: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			margin-bottom: 30rpx;
			.top_box_left {
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 30rpx;
				.top_box_left_img {
					width: 28rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.top_box_title {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 6rpx 30rpx;
				background: #ffffff;
				border-radius: 30rpx;
				.top_box_title_img {
					width: 24rpx;
					height: 24rpx;
				}
				.top_box_title_inp {
					flex: 1;
					padding: 0 15rpx;
					font-size: 24rpx;
					font-weight: 500;
					text-align: left;
					color: #787878;
				}
			}
		}

		.nav {
			margin-bottom: 30rpx;
			position: relative;
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			width: 100%;
			box-sizing: border-box;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch; /* 平滑滚动 */
			scrollbar-width: none; /* 隐藏滚动条 Firefox */
			padding: 0 20rpx;
			&::-webkit-scrollbar {
				display: none; /* 隐藏滚动条 Chrome/Safari */
			}

			.nav_nr {
				position: relative;
				display: block;
				z-index: 1; /* 确保文字在伪元素上方 */
				flex-shrink: 0; /* 防止项目被压缩 */
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				margin-right: 40rpx;
				&:first-child {
					margin-left: 10rpx; /* 第一个项目左边距 */
				}
				&:last-child {
					margin-right: 0; /* 最后一个项目右边距 */
				}
			}

			.nav_nr_xz {
				font-size: 32rpx;
				font-weight: 700;
				color: #000000;
			}

			.nav_nr_xz::after {
				content: '';
				position: absolute;
				bottom: -5rpx;
				left: 5rpx;
				background-color: #55bb8a; /* 横条颜色，可调整 */
				z-index: -1;
				width: 105rpx;
				height: 10rpx;
				background: linear-gradient(#015fff 0%, rgba(1, 95, 255, 0) 100%);
				border-radius: 5rpx;
			}
		}

		.sift {
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			padding: 15rpx;
			background-color: #fff;
			.sift_title {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
				.sift_title_img {
					width: 10rpx;
					height: 6rpx;
					margin-left: 8rpx;
				}
			}
		}
	}

	.con {
		position: relative;
		min-height: 50vh;
		.con_img {
			width: 100%;
			height: 100%;
			position: absolute;
			background: linear-gradient(0deg, #f4f5f9 70%, #ffffff 100%);
		}
		.box {
			padding: 0 30rpx 30rpx;
		}
	}

	.list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;
		.list_nr {
			width: 335rpx;
			position: relative;
			background: #ffffff;
			border-radius: 12rpx;
			.list_nr_img {
				width: 335rpx;
				height: 335rpx;
			}

			.list_nr_box {
				padding: 20rpx;
				.list_nr_title {
					white-space: nowrap; /* 禁止换行 */
					overflow: hidden; /* 隐藏超出部分 */
					text-overflow: ellipsis; /* 显示省略号 */
					font-size: 28rpx;
					font-weight: 700;
					color: #000000;
					margin-bottom: 15rpx;
				}
				.list_nr_text {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.list_nr_text_nr {
						font-size: 24rpx;
						font-weight: 500;
						color: #787878;
					}
				}
			}
		}
	}

	//
</style>
